/**
 * 学习目标：使用Ref，获取组件实例对象
 * 步骤：
 * 1.使用React.createRef()来创建ref对象
 * 2.给input设置ref标签属性
 * 3.通过this.ref对象名字.current获取到input的DOM元素
 */
import React from 'react';
import ReactDOM from 'react-dom';

// 创建一个子组件
class MyHeader extends React.Component {
  state = {
    msg: 'hello Reacts',
  };

  handleChange = () => {
    this.setState({ msg: 'hello 666' });
  };

  render() {
    return (
      <div>
        <header>我是Header， {this.state.msg}</header>
      </div>
    );
  }
}

class App extends React.Component {
  //  1.使用React.createRef()来创建ref对象
  textRef = React.createRef();

  handleClick = () => {
    // 获取组件实例对象
    console.log(this.textRef.current.state.msg, '子组件中的msg');
    // 通过ref获取子组件对象，再调用子组件的方法
    this.textRef.current.handleChange();
    // console.log(this.textRef.current.handleChange(), '调用子组件实例对象');
  };

  render() {
    console.log(this.textRef, 'ref对象');
    return (
      <div>
        名字：
        {/* 2.给子组件设置ref标签属性 */}
        <MyHeader ref={this.textRef} />
        {/* 3. 准备一个按钮，在按钮的点击上获取组件实例对象 */}
        <button onClick={this.handleClick}>点我通过Ref获取组件</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
